<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar :title="title" bgColor="#da708b" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<uni-forms ref="address_info" :rules="rules" :modelValue="formData">
			<view class="addressi_list">
				<uni-forms-item label="联系人" class="addr_forms_item" label-width="80px" name="clientDeliveryName">
					<uni-easyinput v-model="formData.clientDeliveryName" :input-border="false"
						placeholder="请填写姓名"></uni-easyinput>
				</uni-forms-item>
				<view class="addril_line"></view>
				<uni-forms-item label="手机号" class="addr_forms_item" label-width="80px" name="clientDeliveryPhone">
					<uni-easyinput v-model="formData.clientDeliveryPhone" :input-border="false"
						placeholder="请填写手机号"></uni-easyinput>
				</uni-forms-item>
			</view>
			<view class="addressi_list">
				<uni-forms-item label="收货地址" class="addr_forms_item" label-width="80px" name="clientDeliveryAddressInfo"
					@tap.stop="chooseAddress">
					<uni-easyinput v-model="formData.clientDeliveryAddressInfo" :disabled="true" :input-border="false"
						suffix-icon="location" placeholder="请选择收货地址"></uni-easyinput>
				</uni-forms-item>
				<view class="addril_line"></view>
				<uni-forms-item label="门牌号" class="addr_forms_item" label-width="80px" name="clientDeliveryDetailedAddress">
					<uni-easyinput v-model="formData.clientDeliveryDetailedAddress" :input-border="false"
						placeholder="例:9幢1单元301室"></uni-easyinput>
				</uni-forms-item>
				<view class="addril_line"></view>
				<uni-forms-item label="标签" class="addr_forms_item" label-width="80px">
					<uni-data-checkbox v-model="formData.clientDeliveryTag" mode="tag"
						:localdata="tags"></uni-data-checkbox>
				</uni-forms-item>
			</view>
			<view class="addressi_list">
				<uni-forms-item label="设为默认地址" class="addr_forms_item" label-width="120px">
					<switch :checked="formData.defaultAddress" color="#e77c90" style="transform:scale(0.7)" @change="switchChange"></switch>
				</uni-forms-item>
			</view>
			<view class="address_btn">
				<button type="default" @click="saveInfo">保存信息</button>
			</view>
		</uni-forms>
	</view>
</template>
<script setup>
	import { ref,onMounted,reactive } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref()
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const address_info = ref(null)
	const atype = ref("add")
	const aindex=ref()
	const latitude = ref(0)
	const longitude = ref(0)
	const formData = reactive({
		clientDeliveryName: "",
		clientDeliveryPhone: "",
		clientDeliveryAddressInfo: "",
		clientDeliveryDetailedAddress: "",
		clientDeliveryTag: "",
		defaultAddress: false,
		id:""
	})
	const tags = ref([{
			text: "家",
			value: "家"
		},
		{
			text: "公司",
			value: "公司"
		},
		{
			text: "父母家",
			value: "父母家"
		},
	])
	const rules = reactive({
		clientDeliveryName: {
			rules: [{
				required: true,
				errorMessage: "请填写姓名",
				trigger: 'blur'
			}]
		},
		clientDeliveryAddressInfo: {
			rules: [{
				required: true,
				errorMessage: "请选择收货地址",
				trigger: 'blur'
			}]
		},
		clientDeliveryDetailedAddress: {
			rules: [{
				required: true,
				errorMessage: "请填写门牌号",
				trigger: 'blur'
			}]
		},
		clientDeliveryPhone: {
			rules: [{
					required: true,
					errorMessage: "请填写联系人手机",
					trigger: 'blur'
				},
				{
					validateFunction: function(rule, value, data, callback) {
						if (!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(value)) {
							callback('请输入正确的手机号')
						}
					}
				}
			]
		},
	})
	const switchChange=()=>{
		formData.defaultAddress=!formData.defaultAddress
	}
	const chooseAddress = () => {
		uni.chooseLocation({
			success: (res) => {
				//console.log(res)
				formData.clientDeliveryAddressInfo = res.address
			},
			fail: (err) => {
				//console.log(err)
			}
		})
	
	}
	const getAddressInfo = () => {
		uni.request({
			url:getApp().globalData.baseUrl+"/delivery/list",
			method:"GET",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data:{
				clientNo:JSON.parse(uni.getStorageSync("user_info")).clientNo
			},
			success:(res)=>{
				//console.log(res)
				formData.clientDeliveryAddressInfo=res.data.value[aindex.value].clientDeliveryAddressInfo
				formData.clientDeliveryPhone=res.data.value[aindex.value].clientDeliveryPhone
				formData.clientDeliveryName=res.data.value[aindex.value].clientDeliveryName
				formData.clientDeliveryDetailedAddress=res.data.value[aindex.value].clientDeliveryDetailedAddress
				formData.clientDeliveryTag=res.data.value[aindex.value].clientDeliveryTag
				formData.defaultAddress=res.data.value[aindex.value].defaultAddress
				formData.id=res.data.value[aindex.value].id
			},
			fail:(err)=>{
				//console.log(err)
			}
		})
	}
	const saveInfo = () => {
		//console.log(formData)
		if(atype.value==="edit"){
			address_info.value.validate().then(res => {
				uni.request({
					url: getApp().globalData.baseUrl + "/delivery/upd",
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Control-Allow-Origin': "*",
						'Authorization': uni.getStorageSync('token')
					},
					data: formData,
					success: (res) => {
						//console.log(res)
						uni.navigateBack({
							delta: 1
						})
					},
					fail: (err) => {
						//console.log(err)
					}
				})
			}).catch(err => {
				//console.log(err)
			})
		}else{
			address_info.value.validate().then(res => {
				uni.request({
					url: getApp().globalData.baseUrl + "/delivery/add",
					method: "POST",
					header: {
						'content-type': 'application/json',
						'Access-Control-Allow-Origin': "*",
						'Authorization': uni.getStorageSync('token')
					},
					data: formData,
					success: (res) => {
						//console.log(res)
						uni.navigateBack({
							delta: 1
						})
					},
					fail: (err) => {
						//console.log(err)
					}
				})
			}).catch(err => {
				console.log(err)
			})
		}
	}
	onLoad((opts) => {
		console.log(opts.type)
		if(opts.type==="edit"){
			aindex.value=opts.index
		}
		atype.value = opts.type 
		console.log(atype.value,aindex.value)
	})
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		const now = new Date().getTime()
		if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
			uni.reLaunch({
				url: "/pages/login/login"
			})
		}else{
				title.value=`${atype.value=='add'?'新增':'编辑'}收货地址`
			if (atype.value == "edit") {
				getAddressInfo()
			}
		}
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style scoped>
	.content {
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
	}
	.addressi_list {
		margin: 10rpx 6rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 10rpx;
		font-size: 30rpx;
	}
	
	.addr_forms_item {
		margin: 0;
	
	}
	
	:deep(.addr_forms_item .is-disabled) {
		background-color: #fff !important;
	}
	
	.addril_line {
		height: 4rpx;
		border-bottom: 1px solid #efefef;
		margin: 6rpx;
	}
	
	.address_btn {
		margin-top: 30rpx;
	
	}
	
	.address_btn button {
		background-color: #e77c90;
		color: #fff;
		border-radius: 20rpx;
	}
</style>